import { GetAllSubjectsApi, SetDefSubjectApi, SubjectsDataApi } from "@/api";
import { Drawer } from "@mui/material";
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import "./subjects.less";
import ArrowRightIcon from "@mui/icons-material/ArrowRight";
import ArrowLeftIcon from "@mui/icons-material/ArrowLeft";
import Confirm from "@/components/Confirm";
import { SetActionCode } from "@/store/ActionType";
import { useNavigate } from "react-router-dom";

// 切换学科的页面
export default function Subjects() {
  const [show, setShow] = useState(false);
  const hideDrawer = () => {
    setShow(false);
  };

  // 左侧列表数据
  const [sideList, setSideList] = useState<IExamItem[]>();
  useEffect(() => {
    GetAllSubjectsApi().then((res) => {
      if (res.errCode === 0) {
        setSideList(res.data);
      }
    });
  }, []);

  // 获取存在 redux里面的 actionCode
  const actionCode = useSelector((state: IRootState) => state.actionCode);
  // 这是一个用于显示当前的选中的学科的数据
  const [curCode, setCurCode] = useState(actionCode);
  // 这个数据是根据actionCode请求回来的当前默认学科的题目分类
  const [subList, setSubList] = useState<IExamItem[]>();
  // 根据actionCode 把当前的默认的信息先获取
  // 每当actionCode变化，就会重新发请求
  useEffect(() => {
    SubjectsDataApi(curCode).then((res) => {
      if (res.errCode === 0) {
        setSubList(res.data);
      }
    });
  }, [curCode]);

  // 左侧的学科列表 的 点击事件
  const onSideItemClick = (item: IExamItem) => {
    // 把当前显示在中间的学科修改
    setCurCode(item.actionCode);
    // 把抽屉关闭
    setShow(false);
  };

  // 控制 Confirm的数据
  const [isConfirmShow, setIsConfirmShow] = useState(false);
  const navigate = useNavigate();
  const onSure = () => {
    // 设置默认学科
    // 向服务器发请求，直接设置默认学科
    SetDefSubjectApi(curCode).then((res) => {
      if (res.errCode === 0) {
        // 跳转到首页
        navigate("/home");
      }
    });
  };
  return (
    <div className="subjects">
      {/* 这是切换学科页面的内容 */}
      <section className="title">
        <div className="flex between">
          {/* 这是显示的已经设置的默认学科，这个地方和首页是同步的 */}
          {/* sideList 里面已经是所有学科的数据的，我们只需要从里面找到和默认的actionCode相同的学科就行 */}
          <h4>
            首页默认 -{" "}
            {sideList?.find((item) => item.actionCode === actionCode)?.title}
          </h4>
          <p className="flex ver-center" onClick={() => setIsConfirmShow(true)}>
            <span>设置默认学科</span>
            <ArrowRightIcon />
          </p>
        </div>
        <h2
          className="flex hor-center ver-center"
          onClick={() => setShow(true)}
        >
          <ArrowLeftIcon />
          {/* 这个地显示的是将要设置的默认学科，在左侧切换的学科 */}
          <span>
            {sideList?.find((item) => item.actionCode === curCode)?.title}
          </span>
          <ArrowRightIcon />
        </h2>
      </section>

      <section className="sub-list">
        <ul className="flex flex-col ver-center">
          {subList?.map((item) => (
            <li key={item.id} className="sub-item">
              {item.title}
            </li>
          ))}
        </ul>
      </section>

      {/*  
        Drawer 组件
          内部放要显示的内容
          anchor 给方位
          open 决定是否显示
          onClose 是关闭的回调
      */}
      <Drawer anchor={"left"} open={show} onClose={hideDrawer}>
        {/* 渲染左侧的列表 */}
        <ul className="side">
          {sideList?.map((item) => (
            <li
              className="side-item"
              key={item.id}
              onClick={() => onSideItemClick(item)}
            >
              {item.title}
            </li>
          ))}
        </ul>
      </Drawer>

      {/* 现在我们直接把 Confirm 作为当前组件的内部组件 */}
      <Confirm
        isShow={isConfirmShow}
        message={sideList?.find((item) => item.actionCode === curCode)?.title!}
        onClose={() => setIsConfirmShow(false)}
        onSure={onSure}
      />
    </div>
  );
}
